<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm">
			<el-form-item label="字段名称">
				<el-input placeholder="输入字段名称" v-model="state.queryForm.checkFieldName"> </el-input>
			</el-form-item>
			<el-form-item label="所属数据集/表">
				<el-cascader v-model="datatabVal" :options="datasTab" :show-all-levels="false" clearable :props="{ expandTrigger: 'hover' }"></el-cascader>
			</el-form-item>
			<el-form-item label="核验规则">
				<el-select v-model="state.queryForm.ruleId" placeholder="请选择" clearable>
					<el-option v-for="item in verificateRulesListData" :key="item.value" :label="item.label" :value="item.id"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="核验时间">
				<el-date-picker
					v-model="verificateTM"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					format="YYYY-MM-DD HH:mm:ss"
					style="width: 380px"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="所属机构">
				<el-select v-model="state.queryForm.orgName" placeholder="请选择" style="width: 150px">
					<el-option v-for="item in unitListData" :key="item.value" :label="item.label" :value="item.itemValue"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="search()" type="primary" :icon="Search">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="resets" :icon="Refresh">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="warning" @click="exportEx" :icon="MessageBox" :loading="btnLoading">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%">
			<el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
			<el-table-column label="核验时间" prop="checkTime" width="160"></el-table-column>
			<el-table-column label="数据表主键" prop="pkValue"></el-table-column>
			<el-table-column label="核验字段" prop="checkFieldName" width="120">
				<template #default="scope">
					<span style="color: rgba(15, 64, 245, 1); cursor: pointer">{{ scope.row.checkFieldName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="核验字段名" prop="checkFieldCode"> </el-table-column>
			<el-table-column label="核验规则" prop="ruleName"> </el-table-column>
			<el-table-column label="字段值" prop="checkFieldValue" width="120"> </el-table-column>
			<el-table-column label="所属机构" prop="orgName"> </el-table-column>
			<el-table-column label="所属表名称" prop="tableName" width="130">
				<template #default="scope">
					<span style="color: rgba(15, 64, 245, 1); cursor: pointer">{{ scope.row.tableName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="所属表名" prop="tableCode" width="140"> </el-table-column>
			<el-table-column label="所属数据集" prop="datasetName"> </el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
</template>

<script setup lang="ts" >
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus/es'
import { IHooksOptions } from '@/hooks/interface'
import timeFormater from 'time-formater'
import { Delete, Edit, Search, Plus, MessageBox, Refresh } from '@element-plus/icons-vue'

import { useCrud } from '@/hooks/indexZQPT'

import { getDatasetsAndTableList, getCheckRulesData, getOrgData, exceptionLogExport } from '@/api/verification-exception-log/index'

const verificateTM = ref([new Date(new Date().getTime() - 2 * 3600 * 1000), new Date()])

let rulesListData = ref([])
let vTimeListData = ref([])
let loading = ref(true)
const currentPage = ref(1)

let total = ref(0)

let verificateRulesListData = ref([])

let datasTab = ref([])
let datatabVal = ref('')
let unitListData = ref([])

let btnLoading = ref(false)

const state: IHooksOptions = reactive({
	dataListLoading: true,
	dataListUrl: 'data-governance/quality/AuditManagement/exception_log',
	queryForm: {
		checkFieldName: '',
		datasetName: datatabVal.value ? datatabVal.value[1] : datatabVal.value,
		ruleId: '',
		orgName: '',
		checkTimeStart: verificateTM.value ? timeFormater(verificateTM.value[0]).format('YYYY-MM-DD HH:mm:ss') : '',
		checkTimeEnd: verificateTM.value ? timeFormater(verificateTM.value[1]).format('YYYY-MM-DD HH:mm:ss') : ''
	}
})

onMounted(() => {
	getDatasetTableList()
	getCheckRulesDatas()
	getOrgDatas()
})

// 数据集及数据表
const getDatasetTableList = () => {
	getDatasetsAndTableList().then(res => {
		if (res.data) {
			datasTab.value = res.data
		}
	})
}
const getCheckRulesDatas = () => {
	verificateRulesListData.value = []
	// verificateRulesListData.value.push({
	// 	label: '全部',
	// 	value: '',
	// 	ID: 0
	// })
	getCheckRulesData().then(res => {
		if (res.data) {
			verificateRulesListData.value = res.data.list&&res.data.list.length>0?res.data.list:[]
			for(let i=0;i<verificateRulesListData.value.length;i++){
				verificateRulesListData.value[i].label = verificateRulesListData.value[i].ruleName
			}
			// Object.assign(verificateRulesListData.value, res.data.list)
			// console.log('规则列表', verificateRulesListData.value)
		}
	})
}
const getOrgDatas = () => {
	unitListData.value = []
	getOrgData().then(res => {
		if (res.data) {
			Object.assign(unitListData.value, res.data)
			console.log('机构列表', unitListData.value)
		}
	})
}

const search = () => {
	state.queryForm.checkTimeStart = verificateTM.value ? timeFormater(verificateTM.value[0]).format('YYYY-MM-DD HH:mm:ss') : ''
	state.queryForm.checkTimeEnd = verificateTM.value ? timeFormater(verificateTM.value[1]).format('YYYY-MM-DD HH:mm:ss') : ''
	state.queryForm.datasetName = datatabVal.value ? datatabVal.value[1] : datatabVal.value
	getDataList()
}

const resets = () => {
	verificateTM.value = [new Date(new Date().getTime() - 2 * 3600 * 1000), new Date()]
	state.queryForm = {
		checkFieldName: '',
		datasetName: '',
		ruleId: '',
		orgName: '',
		checkTimeStart: verificateTM.value[0],
		checkTimeEnd: verificateTM.value[1]
	}

	state.page = 1
	state.limit = 10

	getDataList()
}

const exportEx = () => {
	btnLoading.value = true
	state.queryForm.checkTimeStart = verificateTM.value ? timeFormater(verificateTM.value[0]).format('YYYY-MM-DD HH:mm:ss') : ''
	state.queryForm.checkTimeEnd = verificateTM.value ? timeFormater(verificateTM.value[1]).format('YYYY-MM-DD HH:mm:ss') : ''
	state.queryForm.datasetName = datatabVal.value ? datatabVal.value[1] : datatabVal.value
	exceptionLogExport(state.queryForm).then(
		res => {
			btnLoading.value = false
			if (res.data.code == '200') {
				downloadHandle(res.data.filePath)
			} else {
				ElMessage.error(res.data.message)
			}
		},
		error => {
			btnLoading.value = false
			console.log(error)
		}
	)
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, downloadHandle } = useCrud(state)
</script>
